let _Vue = null
export default class VueRouter {
  //vue插件注册时自动执行，第一个参数是Vue构造函数，第二个参数注册插件时传入的参数
  static install (Vue) {
    //1.判断插件是否安装
      if(VueRouter.install.installed){
        return 
      }
      VueRouter.install.installed = true
    //2.把vue构造函数记录到全局
    _Vue = Vue
    //3.把创建vue实例传入的router对象注入到vue实例上(原型上)
    
    //使用混入
    _Vue.mixin({
      beforeCreate(){
        if(this.$options.router){
           _Vue.prototype.$router  = this.$options.router
           this.$options.router.init()
        }
      }
    })
  }

  //初始化属性
  constructor(options){
    this.options = options
    this.routeMap = {}
    this.data = _Vue.observable({
      current:'/'
    })
  }

  init(){
    this.createRouterMap()
    this.initComponents(_Vue)
    this.initEvent()
  }

  //创建路由组件映射关系
  createRouterMap(){
    //遍历所有的路由规则，把所有的路由规则解析成键值对形式，存储在routerMap中
    this.options.routes.forEach(route=>{
      this.routeMap[route.path] = route.component
    })
  }

  //初始化组件router-link和router-view
  initComponents(Vue){
    const self = this
    Vue.component('router-link',{
      props:{
        to:String
      },
      render(h){
        return h('a',{
          attrs:{
            href:this.to
          },
          on:{
            click:this.clikHandler
          }
        },[this.$slots.default])
      },
      methods:{
        clikHandler(e){
          e.preventDefault()
          if(self.data.current==this.to){
            return
          }
          if(self.options.mode=='history'){
            history.pushState({},'',this.to)
          }else{
            window.location.hash = '#'+this.to
          }
          self.data.current = this.to
        }
      }
      // template:'<a :href="to"><slot><slot/></a>'
    })

    Vue.component('router-view',{
      render(h){
        const conponent = self.routeMap[self.data.current]
        return h(conponent)
      }
    })
  }

  //处理浏览器自带事件及其他扩展事件
  initEvent(){
    window.addEventListener('popstate',()=>{
      if(this.options.mode==='history'){
        this.data.current = window.location.pathname
      }else{
        this.data.current = window.location.hash.slice(1)
      }
    })
  }
}